/*
 * Creta ui takes control of DOM manipulation for inserting and manipulating toolbar and editor tags.
 * Also it has part of shortcuts code.
 *
 * This code is under AGPLV3 by alkeon (alkeon@autistici.org).
 *
 */
 /*jslint browser: true*/

"use strict";

/*jshint esversion: 6 */

class creta_ui{
	/*
	 * Insert HTML toolbar, popups and HTML structure for editor
	 *
	 */
	 constructor(element, options) {
		let div = document.createElement("div");
		div.className = 'edit-controls';
		this.options = options;
		this.element = element;
		if(typeof options !== 'undefined'){
		
			if(options.clear_button){
				this.set_button_with_tooltip(div, 'clean', '🗋',  'tool', 'Clean editor');
				this.toolbox_separator(div);
			}
			if(options.embed || options.heading)
				this.set_button_with_tooltip_and_image(div, 'clear_style', 'icons/clear_style.svg', 'Clear style item icon', 'Delete heading or embed tags');
			
			if(options.heading)
				this.set_heading_buttons(div);
			
			if(options.list)
				this.set_button_with_tooltip_and_image(div, 'list_toolbar', 'icons/list.svg', 'List item icon', 'Create a list');
			
			if(options.link)
				this.set_button_with_tooltip_and_image(div, 'link_toolbar', 'icons/link.svg', 'Link icon', 'Create a link');

			if(options.table)
				this.set_button_with_tooltip_and_image(div, 'table_toolbar', 'icons/table.svg', 'Table icon', 'Create a table');
			
			if(options.image)
				this.set_image_button(div);

			if(options.block)
				this.set_button_with_tooltip_and_image(div, 'block_toolbar', 'icons/block.svg', 'Block icon', 'Create a block. A group of text organized.');

			if(options.code)
				this.set_code_button(div);

			if(options.embed){
				this.set_button_with_tooltip_and_image(div, 'embed_toolbar', 'icons/embed.svg', 'Embed icon', 'Keep text as is, does not convert elements as tedi tags.');
				this.toolbox_separator(div);
			}
			if(options.save)
				this.set_button_with_tooltip_and_image(div, 'save_toolbar', 'icons/save.svg', 'Save icon', 'Save your progress in browser.');
			
			if(options.load){
				this.set_button_with_tooltip(div, 'load_toolbar', '🗘', 'tool', 'Load your progress in browser.');
				this.toolbox_separator(div);
			}
			element.append(div);
			
			//Popup
			if(options.link)
				this.set_link_popup(div);
		
			if(options.table)
				this.set_table_popup(div);
				
			if(options.image)
				this.set_image_popup(div);
			
			if(options.block)
				this.set_block_popup(div);
				
		} else
			element.append(div);

		this.add_editor(element, 'visual-editor');

	}
	
	/*
	 * Create list button
	 * scheme:
	 * - div (btn command list button left list_toolbar)
	 * 	* div (tooltip)
	 *		- div text
	 *		- div (tooltiptext)
	 *
	 */
	
	set_button_with_tooltip(div, className, tool_text, text_class, tooltip_text){
		let toolbar_div = document.createElement("div");
		toolbar_div.className = 'button left btn command ' + className;
		
		let tooltip_div = document.createElement("div");
		tooltip_div.className = 'tooltip';
		
		let tool_div = document.createElement("div");
		tool_div.className = text_class;
		tool_div.appendChild(document.createTextNode(tool_text));
		
		let tooltip_text_div = document.createElement("div");
		tooltip_text_div.className = 'tooltiptext';
		tooltip_text_div.appendChild(document.createTextNode(tooltip_text));
		
		tooltip_div.appendChild(tool_div);
		tooltip_div.appendChild(tooltip_text_div);
		
		toolbar_div.appendChild(tooltip_div);
		
		div.appendChild(toolbar_div);
	}
	
	/*
	 * Create list button with image
	 * scheme:
	 * - div (btn command list button left list_toolbar)
	 * 	* div (tooltip)
	 *		- img (tooltip_text value)
	 *		- div (tooltiptext)
	 *
	 */
	
	set_button_with_tooltip_and_image(div, className, icon_src, icon_alt, tooltip_text){
		let toolbar_div = document.createElement("div");
		toolbar_div.className = 'button left btn command ' + className;
		
		let tooltip_div = document.createElement("div");
		tooltip_div.className = 'tooltip';
		
		let icon = document.createElement("img");
		icon.src = icon_src;
		icon.alt = icon_alt;
		icon.width = 24;
		icon.height = 24;
		
		let tooltip_text_div = document.createElement("div");
		tooltip_text_div.className = 'tooltiptext';
		tooltip_text_div.appendChild(document.createTextNode(tooltip_text));
		
		tooltip_div.appendChild(icon);
		tooltip_div.appendChild(tooltip_text_div);
		
		toolbar_div.appendChild(tooltip_div);
		
		div.appendChild(toolbar_div);
	}
	
	/*
	 * Create heading select
	 * scheme:
	 * 	h1 button
	 * 	h2 button
	 * 	h3 button
	 * - separator
	 *
	 */
	set_heading_buttons(div){
		this.set_button_with_tooltip_and_image(div, 'heading1_toolbar', 'icons/h1.svg', 'First level heading item icon', 'Create a first level heading');
		this.set_button_with_tooltip_and_image(div, 'heading2_toolbar', 'icons/h2.svg', 'Second level heading item icon', 'Create a second level heading');
		this.set_button_with_tooltip_and_image(div, 'heading3_toolbar', 'icons/h3.svg', 'Third level heading item icon', 'Create a third level heading');
		this.toolbox_separator(div);
	}
	
	/*
	 * Create image button
	 * scheme:
	 * - div (button btn command left)
	 * 	* div
	 *		- img (List Item)
	 *		- input
	 *		- div (tooltiptext)
	 *
	 */
	set_image_button(div){
		let toolbar_div = document.createElement("div");
		toolbar_div.className = 'button btn command left';
		
		let tooltip_div = document.createElement("div");
		tooltip_div.className = 'tooltip';
		
		let input = document.createElement("input");
		input.type = "file";
		input.accept = "image/*";
		input.className = "image_toolbar";
		
		let icon = document.createElement("img");
		icon.src = "icons/embed-image.svg";
		icon.alt = "Image icon";
		icon.width = 24;
		icon.height = 24;
		
		let tooltip_text = document.createElement("div");
		tooltip_text.className = 'tooltiptext';
		tooltip_text.appendChild(document.createTextNode("Upload an image"));
		
		tooltip_div.appendChild(icon);
		tooltip_div.appendChild(input);
		tooltip_div.appendChild(tooltip_text);
		
		toolbar_div.appendChild(tooltip_div);
		
		div.appendChild(toolbar_div);
		
		this.toolbox_separator(div);
	}
	
	/*
	 * Create code button
	 * scheme:
	 * - div (button btn command left)
	 * 	* div
	 *		- img (List Item)
	 *		- div (tooltiptext)
	 *
	 */
	set_code_button(div){
		let toolbar_div = document.createElement("div");
		toolbar_div.className = 'button left btn command code_toolbar';
		
		let tooltip_div = document.createElement("div");
		tooltip_div.className = 'tooltip';
		
		let icon = document.createElement("img");
		icon.src = "icons/code-tag.svg";
		icon.alt = "Metatag icon";
		icon.width = 24;
		icon.height = 24;
		icon.setAttribute("data-command", "code");
		
		let tooltip_text = document.createElement("div");
		tooltip_text.className = 'tooltiptext';
		tooltip_text.appendChild(document.createTextNode("Keep text as is, does not convert elements as tedi tags."));
		
		tooltip_div.appendChild(icon);
		tooltip_div.appendChild(tooltip_text);
		
		toolbar_div.appendChild(tooltip_div);
		
		div.appendChild(toolbar_div);
	}
	
	/*
	 * Create link popup
	 * scheme:
	 * - div (popup link_popup link-ui)
	 * 	* div (popup_text)
	 *	* div (close_button)
	 *		- img (Close popup icon)
	 *	* input (Link Item)
	 *	* button (accept_link)
	 *
	 */
	set_link_popup(div){
		let popup = document.createElement("div");
		popup.className = 'popup link_popup link-ui';
		popup.style = "display:none;";
		
		let popup_text = document.createElement("div");
		popup_text.className = 'popup_text';
		popup_text.appendChild(document.createTextNode("Write link URL"));
		
		let close_button_div = document.createElement("div");
		close_button_div.className = 'close_button';
		close_button_div.onclick = function(){
			this.parentElement.style.display = 'none';
		};
		
		close_button_div.appendChild(document.createTextNode("🗙"));
		
		let input = document.createElement("input");
		input.type = "text";
		input.className = "link_input";
		
		let button = document.createElement("button");
		button.type = "button";
		button.className = "accept_link";
		button.appendChild(document.createTextNode("Accept"));
		
		popup.appendChild(popup_text);
		popup.appendChild(close_button_div);
		popup.appendChild(input);
		popup.appendChild(button);
		
		div.appendChild(popup);	
	}
	
	/*
	 * Create table popup
	 * scheme:
	 * - div (popup table_popup table-ui)
	 * 	* div (popup_text)
	 *	* div (close_button)
	 *		- img (Close popup icon)
	 *	* input (h)
	 *	* input (w)
	 *	* button (accept_table)
	 *
	 */
	set_table_popup(div){
		let popup = document.createElement("div");
		popup.className = 'popup table_popup table-ui';
		popup.style = "display:none;";
		
		let popup_text = document.createElement("div");
		popup_text.className = 'popup_text';
		popup_text.appendChild(document.createElement("BR"));
		popup_text.appendChild(document.createElement("BR"));
		popup_text.appendChild(document.createTextNode("Write row and columns for table"));
		
		let close_button_div = document.createElement("div");
		close_button_div.className = 'close_button';
		close_button_div.onclick = function(){
			this.parentElement.style.display = 'none';
		};
		
		close_button_div.appendChild(document.createTextNode("🗙"));
		
		let input_width = document.createElement("input");
		input_width.type = "number";
		input_width.className = "h";
		
		let input_height = document.createElement("input");
		input_height.type = "number";
		input_height.className = "w";
		
		let button = document.createElement("button");
		button.type = "button";
		button.className = "accept_table";
		button.appendChild(document.createTextNode("Accept"));
		
		popup.appendChild(popup_text);
		popup.appendChild(close_button_div);
		popup.appendChild(input_width);
		popup.appendChild(input_height);
		popup.appendChild(button);
		
		div.appendChild(popup);
	}
	
	/*
	 * Create image popup
	 * scheme:
	 * - div (popup image_popup image-ui)
	 * 	* div (popup_text)
	 *	* div (close_button)
	 *		- img (Close popup icon)
	 *	* div (alt_input)
	 *	* button (accept_image)
	 *
	 */
	set_image_popup(div){
		let popup = document.createElement("div");
		popup.className = 'popup image_popup image-ui';
		popup.style = "display:none;";
		
		let popup_text = document.createElement("div");
		popup_text.className = 'popup_text';
		popup_text.appendChild(document.createElement("BR"));
		popup_text.appendChild(document.createElement("BR"));
		popup_text.appendChild(document.createTextNode("Write image alternative text"));
		
		let close_button_div = document.createElement("div");
		close_button_div.className = 'close_button';
		close_button_div.onclick = function(){
			this.parentElement.style.display = 'none';
		};
		
		close_button_div.appendChild(document.createTextNode("🗙"));
		
		let input = document.createElement("input");
		input.type = "text";
		input.className = "alt_input";
		
		let button = document.createElement("button");
		button.type = "button";
		button.className = "accept_image";
		button.appendChild(document.createTextNode("Accept"));
		
		popup.appendChild(popup_text);
		popup.appendChild(close_button_div);
		popup.appendChild(input);
		popup.appendChild(button);
		
		div.appendChild(popup);
	}
	
	/*
	 * Create block popup
	 * scheme:
	 * - div (popup block_popup image-ui)
	 * 	* div (popup_text)
	 *	* div (close_button)
	 *		- img (Close popup icon)
	 *	* div (block_input)
	 *	* button (accept_block)
	 *
	 */
	set_block_popup(div){
		let popup = document.createElement("div");
		popup.className = 'popup block_popup block-ui';
		popup.style = "display:none;";
		
		let popup_text = document.createElement("div");
		popup_text.className = 'popup_text';
		
		popup_text.appendChild(document.createElement("BR"));
		popup_text.appendChild(document.createElement("BR"));
		popup_text.appendChild(document.createTextNode("Write block class"));
		
		let close_button_div = document.createElement("div");
		close_button_div.className = 'close_button';
		close_button_div.onclick = function(){
			this.parentElement.style.display = 'none';
		};
		
		close_button_div.appendChild(document.createTextNode("🗙"));
		
		let input = document.createElement("input");
		input.type = "text";
		input.className = "block_input";
		
		let button = document.createElement("button");
		button.type = "button";
		button.className = "accept_block";
		button.appendChild(document.createTextNode("Accept"));
		
		popup.appendChild(popup_text);
		popup.appendChild(close_button_div);
		popup.appendChild(input);
		popup.appendChild(button);
		
		div.appendChild(popup);
	}
	
	get_range_block(){ return this.range_block;}

	/*
	 * Open block popup and set focus on width input
	 * 
	 */
	block_toolbar(e){
		range_block = window.getSelection().getRangeAt(0);
		e.currentTarget.sourceTarget.getElementsByClassName('block_popup')[0].style.display = "block";
		return false;
	}
	
	/*
	 * Create editor structure
	 * scheme:
	 * - div (overflow-container)
	 * 	* div (visual-editor-container)
	 *		- div (overflow-content visual-editor)
	 *			* div
	 *
	 */
	add_editor(element, classname){
		let overflow_container = document.createElement('div');
		overflow_container.className = "overflow-container";
		
		let visual_editor_container = document.createElement('div');
		visual_editor_container.className = "visual-editor-container";
		
		let visual_editor = document.createElement('div');
		visual_editor.className = "overflow-content visual-editor";
		visual_editor.spellcheck = false;
		
		let content_editable_div = document.createElement('div');
		content_editable_div.contentEditable = true;
		
		visual_editor.appendChild(content_editable_div);
		
		visual_editor_container.appendChild(visual_editor);
	
		overflow_container.appendChild(visual_editor_container);
		
		element.appendChild(overflow_container);
	}
	
	/*
	 * Create toolbox separator
	 * scheme:
	 * - div (separator left)
	 *
	 */
	toolbox_separator(element){
		let separator = document.createElement('div');
		separator.className = 'separator left';
		element.appendChild(separator);
	}

	/*
	 * Hide/Unhide element
	 *
	 */
	change_visibility(element){
		if(element.style.display != "none")
			element.style.display = "none";
		else
			element.style.display = "block";
	}
	
	/*
	 * Methods that checks event for clear shortcut
	 * Ctrl + Shift + C
	 *
	 */
	clean_keybinding(e){

		if(e.key == 'C' && e.ctrlKey) {
			this.element.getElementsByClassName('clean')[0].click();
			event.preventDefault();
			return false;
		}
	}
	
	/*
	 * Methods that checks event for link shortcut
	 * Ctrl + Shift + K
	 *
	 */
	link_keybinding(e){

		if(e.key == 'K' && e.ctrlKey) {
			this.element.getElementsByClassName('link_toolbar')[0].click();
			event.preventDefault();
			return false;
		}
	}
	
	/*
	 * Methods that checks event for image shortcut
	 * Ctrl + Shift + I
	 *
	 */
	image_keybinding(e){

		if(e.key == 'I' && e.ctrlKey) {
			this.element.getElementsByClassName('image_toolbar')[0].click();
			event.preventDefault();
			return false;
		}
	}
	
	/*
	 * Methods that checks event for table shortcut
	 * Ctrl + Shift + T
	 *
	 */
	table_keybinding(e){

		if(e.key == 'T' && e.ctrlKey) {
			this.element.getElementsByClassName('table_toolbar')[0].click();
			e.preventDefault();
			return true;
		}
	}
		
	/*
	 * Methods that checks event for block shortcut
	 * Ctrl + Shift + B
	 *
	 */
	block_keybinding(e){
	
		if(e.key == 'B' && e.ctrlKey) {
			this.element.getElementsByClassName('block_toolbar')[0].click();
			event.preventDefault();
			return false;
		}
	}
	
	/*
	 * Methods that checks event for block shortcut
	 * Ctrl + Shift + E
	 *
	 */
	embed_keybinding(e){

		if(e.key == 'E' && e.ctrlKey && e.shiftKey) {
			this.element.getElementsByClassName('embed_toolbar')[0].click();
			e.preventDefault();
			return false;
		}
	}
	

}
